<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>


<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    // This example requires ECharts v5.5.0 or later
    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'center',
            // left: 'left',
            right: 'right',
            orient: 'vertical',
            formatter:function(name) {
                console.log(option,'option')
                const find = option.series[0].data.find(f => f.name === name);
                return `{a|${name}} {b|${find.value}}`;
            },
            textStyle:{
                rich: {
                    a: {
                        color: "#4C5362",
                        lineHeight: 18,
                        width: 100,
                    },
                    b: {
                        color: "#21242E",
                        fontSize: 12,
                        lineHeight: 18,
                        align: "right",
                        fontWeight: 700
                    }
                }

            }
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '70%'],
                // adjust the start and end angle
                startAngle: 180,
                endAngle: 360,
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>